<template>
	<div style="width: 100%; overflow: hidden;">
			<div class="allList">
		
				<span class="allList_num">
		    	{{currentPage*10-9}}-
		    	{{currentPage*10>totalItems?totalItems:currentPage*10}} 
		    	条/共
		    	{{totalItems}}
		    	条
		    </span>
		    <el-button 
		    	class="previousPageButton" 
		    	@click="previousPage" 
		    	>上一页</el-button>
		    <el-button 
		    	class="nextPageButton" 
		    	@click="nextPage" 
		    	>下一页</el-button>
		    
		    <el-popover
		      placement="top"
		      width="160"
		      v-model="visible">
		      <div style="text-align: right; margin: 0">
		        <div>
		        	前往 
		        	<input 
		        		type="text" 
		        		v-model="topage" 
		        		class="zl-page">页 
		        	<el-button @click="zltopage" type="text" size="small">确定</el-button>
		        </div>
		      </div>
		      <el-button slot="reference">指定跳转</el-button>
		    </el-popover>
			
    
  		</div>
  	</div>
</template>

<script>
	import { validatRate } from '@/utils/validate';
	export default {
		props: [ "currentPage", "totalItems", "pageIndex", "pageSize", "totalPage" ],
		data() {
			return {
				previousPageButtonShow: false,
				visible: false,
				topage: '',
				pageindex: ''
			}
		},
		methods: {
			previousPage() {
				if(this.pageindex > 1) {
          this.pageindex--;
        }else {
        	this.pageindex = this.totalPage;
          
        }
        this.$emit('pageChange', Number(this.pageindex));
			},
			nextPage() {
				/*console.log(this.totalPage,'totalPage');
				console.log(this.currentPage,'currentPage');
				console.log(this.totalItems,'totalItems');
				console.log(this.pageindex,'pageindex');
				console.log(this.pageSize,'pageSize');*/
				if(this.pageindex < this.totalPage){
          this.pageindex++
        }else {
        	this.pageindex = 1;
          
        }
        this.$emit('pageChange', Number(this.pageindex));
			},
			zltopage() {
				let _this = this;
        let topage = _this.topage;
        if(topage==''||!validatRate(topage)){
          return false
        }else {
        	if(topage > _this.totalPage){
        		_this.pageindex = _this.totalPage;
        		this.topage = _this.totalPage;
        	} else if(topage < 1 ) {
        		_this.pageindex = 1;
        		this.topage = 1;
        	}else{
        		_this.pageindex = topage;
        	}
        	
          _this.$emit('pageChange', Number(this.pageindex));
        }
			}
		},
		created() {
			this.pageindex = this.pageIndex
		}
	}
</script>

<style scoped="scoped">
	*{margin: 0;padding: 0;}
	.allList{
    padding: 40px 30px 40px 20px;
    float: right;
    margin-right: 30px;
  }
  .zl-page{
    width: 30px;
    margin: 0 3px;
    padding: 0 5px;
    box-shadow: inset 1px 0 2px rgba(0,0,0,0.2);
    border: 1px solid #ccc;
    outline: none;
    height: 22px;
    font-size: 12px;
  }
  .allList_num{
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #6E6E6E;
    letter-spacing: 0;
  }
  .nextPageButton,.previousPageButton{
  	width: 60px;
    height: 30px;
  }
  
</style>